<template>
	<view class="search">
		<view class="head">
			<view class="bg"></view>
			<!-- <image class="bg" :src="$buildFullImageUrl('/static/consult/head-bg.png')"></image> -->
			<view>
				<uni-easyinput prefixIcon="search" v-model="searchValue" placeholder="搜索你感兴趣的内容"></uni-easyinput>
				<view class="btn" @click="handleSearch">搜索</view>
			</view>
		</view>
		<view class="tab">
			<uni-segmented-control :current="current" :values="items" style-type="text" @clickItem="onClickItem" />
		</view>
		<view class="con-wrap">
			<scroll-view class="scrollWrap" :enhanced="true" scroll-y :bounces="false" :show-scrollbar="false">
				<view class="box-container" v-if="current === 0 || current === 1">
					<view class="top" v-if="articleList.length != 0">
						<text>文章</text>
						<view @click="handelArticle">
							<text>更多</text>
							<uni-icons type="right" size="18" color="#a5a5a5"></uni-icons>
						</view>
					</view>
					<view style="padding: 0 30rpx 24rpx 30rpx; box-sizing: border-box" v-if="articleList.length != 0">
						<view class="mid" v-for="(item, index) in articleList" :key="index" @click="handelArticleDetail(item)">
							<image :src="$fullImageUrl(item.coverImage)"></image>
							<view class="right-con">
								<view>{{ item.title }}</view>
								<view>
									<text>{{ item.author }}</text>
									<text>{{ item.publishedAt }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="box-container" v-if="current === 0 || current === 2">
					<view class="top" v-if="evaluateList.length != 0">
						<text>测评</text>
						<view @click="moreEvaluate">
							<text>更多</text>
							<uni-icons type="right" size="18" color="#a5a5a5"></uni-icons>
						</view>
					</view>
					<view style="padding: 0 30rpx 24rpx 30rpx; box-sizing: border-box" v-if="evaluateList.length != 0">
						<view class="mid" v-for="(item, index) in evaluateList" :key="index" @click="itemClickDetail(item)">
							<image :src="$fullImageUrl(item.coverImage)"></image>
							<view class="right-con">
								<view>{{ item.appraisalName }}</view>
								<view>
									<text>{{ item.appraisalPeopleFalse }}测过</text>
									<text>{{ item.appraisalNumber }}题</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="box-container" v-if="current === 0 || current === 3">
					<view class="top" v-if="dotList.length != 0">
						<text>专家</text>
						<view @click="moreReservation">
							<text>更多</text>
							<uni-icons type="right" size="18" color="#a5a5a5"></uni-icons>
						</view>
					</view>
					<view style="padding: 0 30rpx 24rpx 30rpx; box-sizing: border-box" v-if="dotList.length != 0">
						<view class="mid-dot" v-for="(item, index) in dotList" :key="index" @click="handelAppoint(item)">
							<view class="con-left">
								<image :src="$fullImageUrl(item.avatarUrl)"></image>
								<view v-if="item.appointmentStatus === 1">最近3天内可约</view>
								<view v-if="item.appointmentStatus === 2">最近5天内可约</view>
								<view v-if="item.appointmentStatus === 3">最近7天内可约</view>
								<view v-if="!item.appointmentStatus">暂无可约</view>
							</view>
							<view class="con-right">
								<view class="con-right-top">
									<view>
										<view>{{ item.expertName }}</view>
										<view>
											<text>¥</text>
											<text>{{ item.individualConsultCost }}</text>
											<text>起</text>
										</view>
									</view>
									<view>
										<image :src="$buildFullImageUrl('/static/consult/address.svg')"></image>
										<text>{{ item.cityCopy }}</text>
									</view>
								</view>
								<view class="con-right-mid">{{ item.title }}</view>
								<view class="con-right-mid2">擅长：{{ item.domainName }}</view>
								<view class="con-right-bot">
									<view>时长：{{ item.totalConsultHours }}+</view>
									<view>从业{{ item.workingYears }}年</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<emptyView v-if="current === 0 && dotList.length === 0 && evaluateList.length === 0 && articleList.length === 0"></emptyView>
				<emptyView v-if="current === 1 && articleList.length === 0"></emptyView>
				<emptyView v-if="current === 2 && evaluateList.length === 0"></emptyView>
				<emptyView v-if="current === 3 && dotList.length === 0"></emptyView>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import { getAppArticleList } from '@/api/index/index.js';
import { getAppraisalList } from '@/api/evaluate/index.js';
import { getExpertList } from '@/api/consult/index.js';
import { getLastPartAfterLastComma } from '@/utils/common.js';
export default {
	data() {
		return {
			searchValue: '',
			items: ['综合', '文章', '测评', '专家'],
			current: 0,
			articleList: [],
			evaluateList: [],
			dotList: []
		};
	},
	watch: {
		searchValue() {
			if (String(this.searchValue).trim().length === 0) {
				this.articleList = [];
				this.evaluateList = [];
				this.dotList = [];
			}
		}
	},
	methods: {
		onClickItem(e) {
			if (this.current !== e.currentIndex) {
				this.current = e.currentIndex * 1;
			}
		},
		moreReservation() {
			this.$tab.switchTab(`/pages/consult/index`);
		},
		handelAppoint(e) {
			this.$tab.navigateTo(`/subset/pages/consult/consultDetail?id=${e.id}`);
		},
		moreEvaluate() {
			this.$tab.switchTab(`/pages/evaluate/index`);
		},
		handelArticle() {
			this.$tab.navigateTo('/subset/pages/articlePage/articlePage');
		},
		itemClickDetail(item) {
			//获取点击的列表项
			this.$tab.navigateTo(`/subset/pages/evaluate/evaluateDetail?id=${item.id}`);
		},
		handelArticleDetail(e) {
			this.$tab.navigateTo(`/subset/pages/articlePage/articleDetail?articleId=${e.id}`);
		},
		handleSearch() {
			if (this.current === 0) {
				getAppArticleList({ title: this.searchValue }).then((res) => {
					this.articleList = res.rows;
				});
				getAppraisalList({
					appraisalName: this.searchValue
				}).then((res) => {
					this.evaluateList = res.rows;
				});
				getExpertList({
					expertName: this.searchValue
				}).then((res) => {
					this.dotList = res.rows;
					this.dotList.map((i) => {
						i.cityCopy = getLastPartAfterLastComma(i.city);
					});
				});
			} else if (this.current === 1) {
				getAppArticleList({ title: this.searchValue }).then((res) => {
					this.articleList = res.rows;
				});
			} else if (this.current === 2) {
				getAppraisalList({
					appraisalName: this.searchValue
				}).then((res) => {
					this.evaluateList = res.rows;
				});
			} else if (this.current === 3) {
				getExpertList({
					expertName: this.searchValue
				}).then((res) => {
					this.dotList = res.rows;
					this.dotList.map((i) => {
						i.cityCopy = getLastPartAfterLastComma(i.city);
					});
				});
			}
		}
	}
};
</script>

<style scoped lang="scss">
.search {
	width: 100%;
	height: 100%;
	background: #f7f6f9;

	.head {
		width: 100%;
		height: 100rpx;
		position: relative;

		.bg {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			background: linear-gradient(127deg, #a4dcb3 0%, #ffeed6 37%, #d3fffb 100%);
		}

		> view:last-child {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 30rpx;
			box-sizing: border-box;

			.btn {
				width: 100rpx;
				text-align: center;
				color: #666;
			}

			::v-deep .uni-easyinput {
				width: 584rpx !important;
				height: 64rpx;
			}

			::v-deep .uni-easyinput__content {
				width: 584rpx !important;
				height: 64rpx;
			}

			::v-deep .uni-easyinput__content-input {
				padding-left: 20rpx;
			}

			::v-deep .is-input-border {
				border-radius: 34rpx;
			}

			::v-deep .uniui-search {
				font-size: 34rpx !important;
			}
		}
	}

	.tab {
		width: 100%;
		height: 70rpx;
		margin-bottom: 10rpx;
		background-color: #fff;
		padding: 0 40rpx;
		box-sizing: border-box;
		// display: flex;
		// justify-content: center;
		// align-items: center;
		display: grid;
		grid-template-columns: auto;

		::v-deep .segmented-control__item {
			// width: 20% !important;
		}

		::v-deep .segmented-control {
			grid-column: 1;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}

	.con-wrap {
		width: 100%;
		height: calc(100% - 170rpx);
		overflow: hidden;
		.scrollWrap {
			width: 100%;
			height: 100%;
		}
		.box-container {
			width: 100%;
			background-color: #fff;
			// margin-bottom: 50rpx;
			overflow: hidden;
			.top {
				width: 100%;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 40rpx;
				box-sizing: border-box;
				border-bottom: 2rpx solid #c4c4c4;
				> text:nth-child(1) {
					color: #000;
					font-weight: bold;
					font-size: 30rpx;
				}
				> view:last-child {
					color: #a5a5a5;
					font-size: 26rpx;
					margin-right: 6rpx;
					display: flex;
					align-items: center;
				}
			}
			.mid {
				width: 100%;
				height: 200rpx;
				// padding: 0 40rpx;
				padding: 14rpx 30rpx 14rpx 12rpx;
				box-sizing: border-box;
				// margin-top: 50rpx;
				margin-top: 24rpx;
				display: flex;
				justify-content: space-between;
				image {
					width: 300rpx;
					height: 100%;
					border-radius: 10rpx;
				}
				.right-con {
					width: calc(100% - 320rpx);
					height: 100%;
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
					align-content: space-between;
					> view:nth-child(1) {
						width: 100%;
						font-size: 26rpx;
						font-weight: 500;
						color: #000;
					}
					> view:last-child {
						width: 100%;
						display: flex;
						justify-content: space-between;
						> text {
							color: #a5a5a5;
							font-size: 20rpx;
						}
					}
				}
			}
			.mid-dot {
				width: 100%;
				height: 186rpx;
				background: #ffffff;
				box-shadow: 0rpx 0rpx 12rpx rgba(0, 0, 0, 0.16);
				border-radius: 20rpx;
				margin-top: 24rpx;
				padding: 14rpx 30rpx 14rpx 12rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				.con-left {
					width: 162rpx;
					height: 158rpx;
					border-radius: 20rpx;
					position: relative;
					overflow: hidden;
					image {
						width: 100%;
						height: 100%;
						position: absolute;
						left: 0;
						top: 0;
					}
					> view {
						width: 100%;
						height: 44rpx;
						line-height: 44rpx;
						text-align: center;
						font-weight: 600;
						font-size: 24rpx;
						color: #ffffff;
						position: absolute;
						bottom: 0;
						left: 0;
						background: rgba(0, 0, 0, 0.3);
					}
				}
				.con-right {
					width: calc(100% - 186rpx);
					height: 100%;
					padding-top: 10rpx;
					display: flex;
					flex-wrap: wrap;
					align-content: space-between;
					&-top {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						> view:first-child {
							display: flex;
							align-items: center;
							> view:nth-child(1) {
								font-family: PingFang SC;
								font-weight: 600;
								font-size: 28rpx;
								color: #333333;
								margin-right: 20rpx;
							}
							> view:nth-child(2) {
								display: flex;
								align-items: center;
								> text:nth-child(1) {
									font-weight: 400;
									font-size: 20rpx;
									color: #5c83fd;
								}
								> text:nth-child(2) {
									font-weight: 600;
									font-size: 28rpx;
									color: #5c83fd;
									margin: 0 10rpx 4rpx;
								}
								> text:nth-child(3) {
									font-weight: 400;
									font-size: 20rpx;
									color: #5c83fd;
								}
							}
						}
						> view:last-child {
							display: flex;
							align-items: center;
							image {
								width: 30rpx;
								height: 25rpx;
								margin-right: 4rpx;
							}
							text {
								font-weight: 400;
								font-size: 24rpx;
								color: #999999;
								padding-right: 14;
							}
						}
					}
					&-mid {
						width: 100%;
						font-weight: 400;
						font-size: 24rpx;
						color: #333333;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
					}
					&-mid2 {
						width: 100%;
						font-weight: 400;
						font-size: 24rpx;
						color: #7b7b7b;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
					}
					&-bot {
						width: 100%;
						display: flex;
						// margin-top: 18rpx;
						> view {
							padding: 2rpx 8rpx;
							background: rgba(253, 193, 78, 0.1);
							border-radius: 18rpx;
							border: 1px solid #fdba41;
							font-weight: 400;
							font-size: 20rpx;
							color: #ff9300;
						}
						> view:nth-child(2) {
							margin-left: 14rpx;
						}
					}
				}
			}
		}
	}
}
</style>
